<template>
  <div class="repairContainer">
    <div class="repairHeader">我要报修</div>
    <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="工程设备" prop="device_id">
        <el-cascader
          :options="engineerTree"
          v-model="form.device_id"
          :props="props"
          expand-trigger="hover"
          @change="TreeChange"
          style="width: 100%"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="问题描述" prop="bill_why">
        <el-input
          v-model="form.bill_why"
          type="textarea"
          placeholder="请描述设备出现的问题"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传照片" prop="p3">
        <el-upload
          class="upload-demo"
          action="http://121.199.29.84:8001/file/upload"
          :on-success="imgHandleSuccess"
          :on-remove="imgHandleRemove"
          :file-list="fileList"
          :limit="3"
          :on-exceed="imgOverLimit"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-form-item>
      <el-button
        type="success"
        size="small"
        style="float: right"
        @click="submitRepair"
        >提交</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { get, postJSON, del } from "@/utils/request.js";

export default {
  data() {
    return {
      form: {},
      engineerTree: [],
      value: [],
      props: {
        value: "id",
        label: "name",
        // children:"children"
      },
      fileList: [],
      rules: {
        device_id: [
          {
            required: true,
            message: "选择报修设备",
          },
        ],
        bill_why: [
          {
            required: true,
            message: "请对设备的故障进行描述",
          },
        ],
        p3: [{ required: true, message: "请上传三张图片" }],
      },
    };
  },
  created() {
    this.getEngineer();
  },
  methods: {
    //事件监听
    TreeChange(val) {
      if (val) {
        (this.form.engineer_id = val[0]), (this.form.device_id = val[1]);
      }
      console.log(this.form);
    },
    imgHandleRemove(file, fileList) {
      this.fileList = fileList;
    },
    imgHandleSuccess(file) {
      console.log(file);

      let img = {
        name: file.data.fileName,
        url: "http://121.199.29.84:8888/group1/" + file.data.id,
      };

      this.fileList.push(img);
      this.form.p3 = this.fileList;
      console.log(this.fileList);
    },
    imgOverLimit() {
      this.$message.warning("最多只能上传3张图片");
    },
    submitRepair() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$confirm("此操作将提交该保修工单, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            if (this.fileList.length === 3) {
              for (const index in this.fileList) {
                let imgIndex = parseInt(index) + 1;
                this.form["p" + imgIndex] = this.fileList[index].url;
              }
              postJSON("/workorder/repairOrder", this.form).then(() => {
                this.$message({
                  type: "success",
                  message: "提交成功!",
                });
                this.$router.push("List");
              });
            } else {
              this.$message.warning("请提交三张图片");
            }
          });
        } else {
          this.$message({
            message: "表单验证失败",
            type: "error",
          });
        }
      });
    },

    //网络请求
    getEngineer() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.engineerTree = res.data;
      });
    },
  },
};
</script>

<style>
.repairHeader {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}
.repairContainer {
  width: 100%;
  padding: 20px 50px 0 50px;
}
</style>